<template>
  <div>获取浏览器基本信息: {{ location }}</div>
  <hr />
  <p v-if="!isSupported">Your browser does not support clipboard API.</p>
  <div v-else>
    <input v-model="input" type="text" />
    <button @click="copy(input)">Copy</button>
    <p>text:{{ text }}</p>
  </div>
  <hr />
  <button ref="element">useEventListener</button>
  <hr />
  <div ref="el" style="--color: #7fa998; color: var(--color)">示例文字，{{ color }}</div>
  <button @click="switchColor">更改颜色</button>
  <div ref="elv" style="--color: #7fa998; --color-one: #df8543" :style="{ color: colorVal }">
    示例文字，{{ key }}：{{ colorVal }}
  </div>
  <button style="margin-left: 0" @click="changeVar">更改颜色变量</button>
  <hr />
  <div class="mb-1">选择文件:</div>
  <input type="file" @change="onFileChange" />
  <div class="mt-4 mb-1">Object URL:</div>
  <code>
    <a v-if="url" :href="url" target="_blank">{{ url }}</a>
    <span v-else>none</span>
  </code>
  <hr />
  <p v-if="isLargeScreen">This is a large screen</p>
  <p v-else>This is a small screen</p>
  <p>isPreferredDark:{{ isPreferredDark ? '黑夜' : '白天' }}</p>
</template>

<script setup>
import { ref, shallowRef } from 'vue'
import {
  useBrowserLocation,
  useClipboard,
  useEventListener,
  useCssVar,
  useObjectUrl,
  useMediaQuery
} from '@vueuse/core'
// 获取浏览器基本信息 host、origin、hostname这些
const location = useBrowserLocation()

//text 复制的内容
//copy 是复制的函数
// isSupported 判断当前的浏览器是否支持这个api
const input = ref('')
const { text, copy, isSupported } = useClipboard()

// vueuse事件绑定
const element = ref(null)
useEventListener(element, 'click', () => {
  console.log('监听点击事件')
})

// vueuse css变量绑定
const el = ref(null)
const color = useCssVar('--color', el)
function switchColor() {
  if (color.value === '#df8543') color.value = '#7fa998'
  else color.value = '#df8543'
}
const elv = ref(null)
const key = ref('--color')
const colorVal = useCssVar(key, elv)
function changeVar() {
  if (key.value === '--color') key.value = '--color-one'
  else key.value = '--color'
}

// useObjectUrl
const file = shallowRef()
const url = useObjectUrl(file)

function onFileChange(e) {
  const target = e.target
  const files = target.files
  file.value = files && files.length > 0 ? files[0] : undefined
}

// 媒体查询
const isLargeScreen = useMediaQuery('(min-width: 1024px)')
const isPreferredDark = useMediaQuery('(prefers-color-scheme: dark)')
</script>

<style lang="scss" scoped></style>
